  <template>
  <div>
    <el-table
      :header-cell-style="{
        background: '#f4f6fa',
        color: '#666666',
        height: '44px',
      }"
      :data="list"
      style="width: 100%"
    >
      <el-table-column label="序号" width="80" type="index"> </el-table-column>
      <el-table-column prop="taskCode" label="工单编号" width="146">
      </el-table-column>
      <el-table-column prop="innerCode" label="设备编号" width="143">
      </el-table-column>
      <el-table-column label="工单类型" width="143">
        <template slot-scope="scope">
          {{scope.row.taskType?scope.row.taskType.typeName:'无'}}
        </template>
      </el-table-column>
      <el-table-column label="工单方式" width="143">
        <template slot-scope="scope">
          {{
            scope.row.createType === 0
              ? "自动"
              : scope.row.createType === 1
              ? "手动"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="工单状态" width="143">
        <template slot-scope="scope">
          {{ scope.row.taskStatusTypeEntity.statusName }}
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="运营人员" width="143">
      </el-table-column>
      <el-table-column prop="createTime" label="创建日期" width="160">
        <template slot-scope="scope">
          {{ scope.row.createTime | getNowTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="{row}">
          <el-button type="text" @click="detailFn(row.taskId,row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-row type="flex" justify="space-between">
        <el-col
          ><div class="leftDec">
            <span>{{ `共${decs.totalCount}条数据 第${decs.pageIndex}/${decs.totalPage}页` }}</span>
          </div></el-col>
        <el-col :span="4">
          <div>
            <el-pagination
              background
              layout="prev, next"
              prev-text="上一页"
              next-text="下一页"
              :current-page.sync='currentPage'
              @current-change='currentChangeFn'
              :disabled='disabled'
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 代办 -->
    <BusinessDetail v-if="detailDialogVisible" :dialogVisible.sync='detailDialogVisible' :DetailList='DetailList'  />
    <!-- 完成 -->
    <completeDetailVue v-if="completeShow" :dialogVisible.sync='completeShow' :DetailList='DetailList'></completeDetailVue>
    <!-- 取消 -->
   <cancelDetail v-if="CancelShow" :dialogVisible.sync='CancelShow' :DetailList='DetailList' />
  </div>
</template>

<script>
// import { detail } from '@/api/workorder'
import BusinessDetail from '@/views/workOrder/components/BusinessDetail.vue'
// 完成
import completeDetailVue from './business/completeDetail.vue'
// 取消
import cancelDetail from '@/views/workOrder/business/cancelDetail.vue'

const dayjs = require('dayjs')
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    decs: {
      type: [Array, Object],
      required: true
    },
    searchStaus: Boolean
  },
  created () {

  },
  data () {
    return {
      addDialogShow: false,
      completeShow: false,
      CancelShow: false,
      currentPage: 1,
      disabled: false,
      detailDialogVisible: false,
      DetailList: []

    }
  },
  components: { BusinessDetail, completeDetailVue, cancelDetail },
  methods: {
    currentChangeFn (val) {
      // console.log(val)
      this.$emit('changePage', val)
    },
    async detailFn (id, row) {
      // console.log(id)
      console.log(row)
      // console.log()
      if (row.taskStatus === 4) {
        // 取消 需要重新创建
        console.log(4, row.taskStatus, '显示完成组件')
        // this.addDialogShow = true
        this.completeShow = true
      } else if (row.taskStatus === 3) {
        // console.log(3, row.taskStatus, '显示重新创建组件')
        this.CancelShow = true
      } else if (row.taskStatus === 1) {
        console.log(1, row.taskStatus, '显示取消取消')
        this.detailDialogVisible = true
      }

      // const res = await detail(id)
      this.DetailList = row
      // console.log(res)
    }

  },
  filters: {
    getNowTime (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    }
  }

}
</script>

<style lang="less" scoped>
/deep/.el-button {
  color: #5f84ff;
  // color: red;
  cursor: pointer;
}
/deep/.el-button:hover {
  color: #4b67d9;
}
// /deep/.el-table .el-table__cell {
//     box-sizing: border-box;
//     height: 44px !important;
// padding: 0 !important;
// }
/deep/ .el-table__cell {
  /* padding: 12px 0; */
  padding: 0 !important;
  height: 44px;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  border-bottom: none !important;
}
/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  // /* border-bottom: 1px solid #EBEEF5; */
  border: none;
}
.page {
  box-sizing: border-box;
  width: 100%;
  height: 96px;
  background-color: #fff;
  padding: 32px 16px;
  .leftDec {
    text-align: left;
    span {
      color: #dcdfe4;
    }
  }
}
/deep/ .el-pagination span:not([class*="suffix"]) {
  display: inline-block;
  font-size: 13px;
  min-width: 70px;
  height: 32px;
  line-height: 32px;
  vertical-align: top;
  box-sizing: border-box;
  background-color: #d5ddf8;
  color: #606266;
  margin-right: 30px;
}
/deep/.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background {
  background-color: transparent !important;
}
/deep/ .el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: transparent !important;
}
</style>
